<!-- 头部布局 -->
<template>
	<view class="customHend" :style="{ height:totalHeight+'px'}">
		<view class="bg">
			<image class="bgimg" src="../../static/image/789.jpg" mode="aspectFill"></image>
		</view>
		<view class="container">
			<view class="statusBar" :style="{ height:statusBarHeight+'px'}">

			</view>
			<view class="titleBar" :style="{ height:titleBarHeight+'px'}" v-if="!foldState">
				<view class="kefu">
					<u-icon name="server-fill" size="22" color="#fff"></u-icon>
				</view>
				<navigator url="/pages_manage/index/index" class="manage">
					<u-icon name="bag-fill" size="22" color="#fff"></u-icon>
					后台管理

				</navigator>

			</view>
			<view class="boby" :class="foldState?'fold':''" :style="{ height:bodyBarHeight+'px'}">
				<view class="brand">
					<view class="pic">
						<image class="img" src="../../static/image/011.jpg" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="title">
							<text class="font">
								端糖小店
							</text>
							<u-icon name="more-circle" size="22" color="#fff"></u-icon>
						</view>
						<view class="des">
							天官赐福,百无禁忌
							为你,明灯三千;为你,花开满城;为你,所向披靡。
						</view>
					</view>
				</view>
				<view class="code">
					<view class="pic">
						<image class="img" src="../../static/image/123.png" mode="aspectFill"></image>
					</view>
					<text class="pay">付款</text>

				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from "vuex"
	export default {
		name: "custom-head-bar",
		data() {
			return {

			};
		},
		computed: {
			...mapGetters(["statusBarHeight", "titleBarHeight", "bodyBarHeight", "totalHeight", "foldState"])

		}

	}
</script>

<style lang="scss">
	// 1
	.customHend {
		height: 400rpx;
		position: relative;
		overflow: hidden;

		.bg {
			width: 100%;
			height: 100%;

			.bgimg {
				width: 100%;
				height: 100%;
			}
		}

		.container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;

			.statusBar {
				border: 1px solid red;
			}

			.titleBar {
				border: 5rpx solid blue;
				padding-left: 30rpx;
				@include flex-box-set(start);
				color: #fff;

				.manage {
					margin-left: 20rpx;
					@include flex-box-set(start);
				}

			}

			.boby {
				@include flex-box();
				padding: 0 45rpx;
				height: 100px;
				border: 1px solid yellow;
				transition: 0.3s;

				.brand {
					width: 580rpx;
					@include flex-box-set(start);

					.pic {
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
						overflow: hidden;

						.img {
							width: 100%;
							height: 100%;
						}

					}

					.text {
						flex: 1;
						padding: 0 30rpx;
						color: #000;

						.title {
							font-size: 36rpx;
							font-weight: 800;
							display: flex;
							align-items: center;

							.font {
								margin-right: 10rpx;
							}

						}

						.des {
							font-size: 26rpx;
							width: 100%;
							opacity: 0.8;
							padding-top: 5rpx;

						}
					}
				}

				.code {
					width: 80rpx;
					height: 80rpx;
					border-left: 1px solid #fff;
					@include flex-box-set(between);
					flex-direction: column;

					.pic {
						width: 40rpx;
						height: 40rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.pay {
						font-size: 22rpx;
						color: #fff;
					}
				}

				&.fold {
					padding: 0 30rpx;

					.brand {
						.pic {
							width: 60rpx;
							height: 60rpx;

						}

						.des {
							display: none;
						}

					}

					.code {
						display: none;

					}
				}




			}
		}

	}
</style>